<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
    <title>个人中心</title>
    <link rel="stylesheet" href="/static/client/style.css">
</head>
<body class="user-page">
    <!-- 头部 -->
    <header class="cart-header">
        <!-- 将返回按钮替换为 < 符号，设置颜色为白色 -->
        <a href="javascript:history.back()">
            <span class="back-symbol">&lt;</span>
        </a>
        <h1>菩提阁</h1>
    </header>
    <!-- 用户信息区域 -->
    <section class="user-info">
        <img src="/static/client/images/headPage.png" alt="用户头像" class="user-avatar">
        <div class="user-details">
            <span  th:text="${users.username}" class="user-nickname"></span>
            <img src="/static/client/images/women.png" alt="女性图标" class="gender-icon">
            <p th:text="${users.phone}" class="user-phone"></p>
        </div>
    </section>
    <!-- 功能入口区域 -->
    <section class="feature-entries">
        <div class="feature-card">
            <a href="/address"><img src="/static/client/images/location.png" alt="地址管理图标"> 收货地址 </a>
        </div>
        <div class="feature-card">
            <a href="/orderList"><img src="/static/client/images/orders.png" alt="我的订单"> 我的订单</a>
        </div>
    </section>
    <!-- 最新订单标题 -->
   <h2 class="latest-order-title">最新订单</h2>
    <!-- 最新订单卡片 -->
    <div th:each="order,orderStat:${orderlist}" class="latest-order-card">
        <div  class="order-header">
            <span th:text="${order.orderDate}" class="order-date"></span>
            <span class="order-status">正在派送</span>
        </div>
        <hr class="dashed-line">
        <div class="order-item">
            <span th:text="${order.orderProducts.products.productName}" class="item-name"></span>
            <span th:text="|x${order.orderProducts.quantity}|" class="item-quantity"></span>
        </div>
        <div class="order-total">
            <span class="total-text" th:text="|共${order.orderProducts.quantity}件商品,实付|"></span>
            <span th:text="|¥${order.totalAmount}|" class="total-amount"></span>
        </div>
    </div>
    <p class="end-of-list">没有更多了</p>
    <!-- 退出登录按钮 -->
    <a href="/logout" class="logout-button">退出登录</a>
     <!-- 底部导航 -->
    <div th:replace="~{/client/bottom-nav}" />
<!--    <footer class="bottom-nav">-->
<!--        <a href="index.html">-->
<!--            <img src="/static/client/images/home.png" alt="首页">-->
<!--            <span>首页</span>-->
<!--        </a>-->
<!--        <a href="address.html">-->
<!--            <img src="/static/client/images/location.png" alt="收货地址">-->
<!--            <span>收货地址</span>-->
<!--        </a>-->
<!--        <a href="user.html">-->
<!--            <img src="/static/client/images/user.png" alt="用户中心">-->
<!--            <span>用户中心</span>-->
<!--        </a>-->
<!--    </footer>-->
    <script src="/static/client/jquery-1.12.4.min.js"></script>
    <script src="/static/client/script.js"></script>
</body>
</html>
